<template>
  <div>
    <my-form :model="model" :rules="rules">
      <my-form-item label prop="username">
        <my-input v-model="model.username"></my-input>
      </my-form-item>
      <my-form-item label prop="age">
        <my-input v-model="model.age"></my-input>
      </my-form-item>
    </my-form>
  </div>
</template>

<script>
import MyForm from '../components/myForm/myForm';
import MyFormItem from '../components/myForm/myFormItem';
import MyInput from '../components/myForm/myInput';
export default {
  name: 'show-my-form',
  data () {
    return {
      model: {
        username: '',
        age: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', mode: 'blur' },
          { max: 10, min: 5, message: '用户名5-10位', mode: 'input' }
        ],
        age: [
            {message: '瞎搞', mode: 'blur', reg: /10086/g}
        ]
      }
    }
  },
  components: {
    MyForm,
    MyFormItem,
    MyInput
  }
}
</script>

<style scoped>
</style>
